<template>
  <transition name="zxyhHeaderComponentTransition">
   <div
      :class="[isIos ? 'header-conatiner-zxyhIos' : 'header-conatiner',{'header-conatiner-has-background':hasBGC}]"
      v-show="headerIsShown" 
    >
    <div v-if="isIos" class="header-empty"></div>
    <div class="header-box">
      <p class="header-left">
        <!-- <Iconfont v-if="isBack" @click.native="goBack" iconClass="iconfont iconright" :class="isShare?'icon-right':''"/>
				<Iconfont v-if='isClose'  @click.native="closeAll" iconClass="iconfont iconcha" /> -->
        <i v-if="isBack" @click="goBack" class="right-back" :class="isShare?'icon-right':''" />
        <i v-if='isClose' @click="closeAll" class="right-close" />
      </p>
      <p class="header-center">{{title}}</p>
      <p class="header-right">
        <Iconfont v-if="isSearch" iconClass="sousuo begin-search-ru" @click.native="funBtn('search')" />
        <span v-if="isRule" @click="funBtn('rule')">兑换规则<i class="iconfont iconwenhao"></i></span>
        <span v-if="isShare" class="share-box" @click="funBtn('share')"><img src="../../assets/images/share_icon.png"></span>
      </p>
    </div>
  </div>
   </transition>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '中信银行直播间'
      },
      isSearch: {
        type: Boolean,
        default: false
      },
      isRule: {
        type: Boolean,
        default: false
      },
      isClose: {
        type: Boolean,
        default: true
      },
      isShare: {
        type: Boolean,
        default: false
      },
      isBack: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        isIos,
         headerIsShown: true,
         hasBGC:false
      }
    },

    created() {
   
    this.$EventBus.$on("showHeader", (x) => {
      this.headerIsShown = x;
    });

      if(this.$route.path=='/zxyh/liveRoom'||this.$route.path=='/zxyh/liveBack'){
 
      this.headerIsShown=false
    }

      if(this.$route.path=='/zxyh/zxyhHome'||this.$route.path=='/zxyh/telResult'){
      this.hasBGC=true
    }
  },
  activated() {
      this.$EventBus.$on("showHeader", (x) => {
      this.headerIsShown = x;
    });

      if(this.$route.path=='/zxyh/liveRoom'||this.$route.path=='/zxyh/liveBack'){
      this.headerIsShown=false
    }

          if(this.$route.path=='/zxyh/zxyhHome'||this.$route.path=='/zxyh/telResult'){
      this.hasBGC=true
    }
  },

  deactivated() {
    this.$EventBus.$emit("showHeader", this.headerIsShown);
  },

  beforeDestroy() {
    this.$EventBus.$emit("showHeader", this.headerIsShown);
  },
    mounted() {

    },
    computed: {
         skinInfo() {
        return this.$store.state.skinStoreInfo
      }

    },
    methods: {
      // 返回
      goBack() {
        let currentPath = this.$route.path;
        if (currentPath == '/zxyh/zxyhHome') {
          this.closeAll()
        } else if (currentPath == '/zxyh/listComMore') {
          if (this.$route.meta.refer == '/zxyh/zxyhHome' || this.$lockr.get('cPath') == 'listComMore') {
            this.$router.push({
              path: `/${this.$channel}/zxyhHome`
            })
          } else {
            this.$router.push({
              path: `/${this.$channel}/telChannel`
            })
          }
        } else if (currentPath == '/zxyh/telChannel' || currentPath == '/zxyh/geratVideoMore') {
          this.$router.push({
            path: `/${this.$channel}/zxyhHome`
          })
        } else if (currentPath == '/zxyh/watchHistory' || currentPath == '/zxyh/mineCollect') {
          this.$router.push({
            path: `/${this.$channel}/mine`
          })
        } else if (currentPath == '/zxyh/mine') {
          let myPath = this.$lockr.get('myPath')
          if (myPath) {
            this.$router.push({
              path: `/${this.$channel}/${myPath}`
            })
          }
        } else {
          this.$router.go(-1);
        }
      },

      // 关闭h5
      closeAll() {
        if (window.bank && window.bank.browserPlugin && window.bank.browserPlugin.close) {
          window.bank.browserPlugin.close()
          return
        }
      },
      // 点击事件
        funBtn(val){
			this.$emit('formChildMsg', {
				type: val,
				data: {'Msg': 'liuyu'}
			})

            if (val == "search") {
        if(this.$route.path==`/zxyh/zxyhHome`){
        this.$EventBus.$emit("showHeader", false);
        }
        this.$EventBus.$emit("autoFocus", true);
      }
      this.$EventBus.$emit("showSearchBar", {
        type: val,
        data: { msg: "liuyu+dingyi" },
      });
	  },
    },
    watch: {
      $route(to, from) {
        let tPath = to.path;
        let fPath = from.path;
        if (tPath == '/zxyh/telMore' && fPath == '/zxyh/zxyhHome') {
          this.$lockr.set('cPath', 'telMore') //从首页进去
        } else if (tPath == '/zxyh/telChannel' && fPath == '/zxyh/zxyhHome') {
          this.$lockr.set('cPath', 'telChannel') //从频道页进去
        } else if (tPath == '/zxyh/mine' && fPath == '/zxyh/zxyhHome') {
          this.$lockr.set('myPath', 'zxyhHome') //从首页到我的页面
        } else if (tPath == '/zxyh/mine' && fPath == '/zxyh/telChannel') {
          this.$lockr.set('myPath', 'telChannel') //从频道页到我的页面
        } else if (tPath == '/zxyh/mine') {
          this.$lockr.set('cPath', 'mine')
        } else if (fPath == '/zxyh/telMore' || fPath == '/zxyh/geratVideoMore') { // 短视频-精彩看/精彩视频   更多 回放
          this.$lockr.set('kPath', 'lookBack')
        } else if (tPath == '/zxyh/telMore' || '/zxyh/geratVideoMore') {
          this.$lockr.set('kPath', '')
        }
      }
    }
  };
</script>
<style scoped="scoped">
.zxyhHeaderComponentTransition-leave-active,
.zxyhHeaderComponentTransition-enter-active {
  transition: opacity 0.5s;
}

.zxyhHeaderComponentTransition-enter,
.zxyhHeaderComponentTransition-leave-to {
  opacity: 0;
}
.header-conatiner-zxyhIos,
.header-conatiner {
  overflow: hidden;
  /* position: absolute */
  position: fixed;
  left: 0px;
  top: 0px;
  /* background: url('../../zxyhPages/newHomeCom/zxyhBG.png') no-repeat center; */
  background-size: cover;
}
.header-conatiner-has-background{
  
  background: url('../../zxyhPages/newHomeCom/zxyhBG.png') no-repeat center;background-size: cover;

}

  .header-empty {
    height: 60px;
    background: #FFFFFF;
  }

  .header-box {
    width: 100vw;
    height: 88px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
  }

  .header-left,
  .header-right {
    height: 100%;
    width: 200px;
    display: flex;
    align-items: center;
    color: #33313E;
  }

  .header-right {
    color: #D04648;
  }

  .header-left .iconfont,
  .header-right .iconfont {
    font-size: 36px;

  }

  .header-left .iconright {
    margin-right: 45px;
  }

  .header-left {
    padding-left: 20px;

  }

  .header-right {
    display: flex;
    flex-flow: row-reverse;
    padding-right: 30px;
  }

  .header-center {
    flex: 1;
    text-align: center;
    font-size: 36px;
    font-weight: 400;
  }

  .header-right span {
    font-size: 26px;

  }

  .header-right .iconwenhao {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
   
  }

  .header-right .begin-search-ru {
    color: #33313E;
    
  }

  .header-right .share-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .share-box img {
    height: 28px;
    width: 28px;
  }

  .header-left .icon-right {
    font-size: 36px;
    color: #FFFFFF;
    font-weight: bold;
  }

  .header-left i {
    height: 40px;
    width: 40px;
    margin-right: 40px;
  }

  .header-left .right-back {
    background: url('../../assets/images/zxyh/back_black.png') no-repeat;
    background-size: 100% 100%;
  }

  .header-left .right-close {
    background: url('../../assets/images/zxyh/close_black.png') no-repeat;
    background-size: 100% 100%;
  }
</style>
